﻿/*

            This file is part of the mojomo modular front end design framework for mojoPortal CMS; 
            find more at mojomo.co.uk or mojomo.codeplex.com	

Name:       3-col-layout.css

Author:     freshangle.co.uk

Version:    1.0

Purpose:    The holy grail layouts mean that you have SEO friendly content highest in the markup 
            when using a multi column layout in mojoPortal and they provide graceful degradation for non-js users. 
            They are based on the percentage layouts at http://matthewjamestaylor.com/blog/perfect-3-column.htm, 
            but dont use the gutters to avoid float bugs in old IE as is done there. 
    
            The alternative is to leave everything on a straightforward division of 100% 
            (the maths is easier when you wnat to change the proportions!) and to use 
            floating and clearing on .ie classes to control the float bugs -
            harder work in the shorterm but much easier in the long.
    
            The sheet follows the structure of a base/no-js layout for graceful degradation followed 
            by media queries - alter widths as appropriate to you, ie will pick these up if 
            you have respond.js included in the layout.master. The media queries contain the basic hg col setups 
            for smart browsers, a buch of responsive rules for the mojoPortal admin pages and the 
            float/clear fixes for float bugs.
    
            The cascade is everything!
    


*/	

/* ------------------------------------------------   3-col-layout.css --------------------------------------------- */	 

    
/* ie cant read media queries without js enabled, so....*/

							 
											 
		.colmid {right:25%;} 
        .colleft {right:50%;}
 
        .col1 {width:50%;left:100%;}   
        .col2 {width:25%;left:25%;}    
        .col3 {width:25%;left:75%;}         


		.administration .col1,		
		.memberlist .col1,
		.htmledit .col1,
		.loginpage .col1 {left:50%;width: 100%} 
		
		.registerpage .col1,
		.passwordrecovery .col1,
		.searchresults	.col1,
		.sitemappage .col1,
		.userprofile .col1,
		.changepassword .col1,
		.pagenotfound .col1,
		.oldie .administration .col1,
		.oldie .memberlist .col1,
		.oldie .htmledit .col1 {left: 75%;width: 100%} 
		
		/*ie 6/7; prevent float bugs....  */  
       .ie6 .col3 {clear:right; float:left}	
       .ie7 .col3 {float:right; clear:left;} 

          
          
/* --------------------------------------------------  media queries ----------------------------------------------- */  
   


/* MOBILE */
@media only screen and (min-width: 0px) {  
	
        .colmid {right:50%;/* width of the right column */}
        .colleft {right:0%;/* width of the middle column */}
	
        .col1 { width:100%;/* width of center column content */ left:50%;}
        .col2 { width:100%;/* Width of left column content */ left:50%;}
        .col3 { width:100%; /* Width of right column content*/  left:50%;	}
		
		.registerpage .col1,
		.passwordrecovery .col1,
		.searchresults	.col1,
		.sitemappage .col1,
		.userprofile .col1,
		.changepassword .col1,
        .memberlist .col1,
		.oldie .pagelayout .col1,
		.oldie .administration .col1,
		.pagenotfound .col1
		{left:50%;width: 100%} 
			
		/* show right column content in ie7 */
        .ie7 .col3 {float:left} 		
		/* clear floats temporarily in ie6.. */
		.ie6 .col3 {clear:both; float:none}	
  
}

/* MOBILE LANDSCAPE */
@media only screen and (min-width: 480px) {
    
 	
/* --------------------------------------  3 column blog @ 480px -------------------------------- */	


		 .colmid  {right:50%;}
		 .colleft {right:0%;}	
	
		 .col1 {width:100%;left:50%;}
		 .col2 {width:50%; left:50%;}
		 .col3 {width:50%; left:50%;}
		 
			 
		.registerpage .col1,
		.passwordrecovery .col1,
		.searchresults	.col1,
		.sitemappage .col1,
		.userprofile .col1,
		.changepassword .col1,
		.pagenotfound .col1,
		.oldie .administration .col1,
		.oldie .memberlist .col1,
		.oldie .htmledit .col1,
		.oldie .loginpage .col1 {left: 50%;width: 100%} 
		
				 
		 /*ie 6/7; prevent float bugs....  */
		.ie7 .col3 {clear:right; float:left}
		/* ...and reinstate floats in ie6.. */	 
    	.ie6 .col3 {clear:left; float:right}
    


}



/* SMALL TABLET */
@media only screen and (min-width: 600px) {


    


/* --------------------------------------  3 column blog @ 768px -------------------------------- */	


        .colmid  {right:100%;} 
        .colleft {left:25%;}
 
        .col1 {width:50%;left:100%;}   
        .col2 {width:25%;left:25%;}    
        .col3 {width:25%;left:75%;} 
  
		.administration .col1,
        .memberlist .col1,
        .htmledit .col1,
        .loginpage .col1,
		.registerpage .col1,
		.passwordrecovery .col1,
		.searchresults	.col1,
		.sitemappage .col1,
		.userprofile .col1,
		.changepassword .col1,
		.pagenotfound .col1,
		.oldie .administration .col1,
		.oldie .memberlist .col1,
		.oldie .htmledit .col1,
		.oldie .loginpage .col1 {left:75%;width: 100%} 
 
}


/* TABLET/NETBOOK */
@media only screen and (min-width: 768px) { 
}

/* LANDSCAPE TABLET/NETBOOK/LAPTOP */
@media only screen and (min-width: 1024px) { 
	
}


/* DESKTOP */
@media only screen and (min-width: 1280px) { 	

}

/* WIDESCREEN */
/* Increased body size for legibility */
@media only screen and (min-width: 1400px) { 
	
}